<!DOCTYPE html>
<html lang="en">

<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">


    <style>
        .customService {

            height: 30px;
            text-align: right;
            line-height: 30px;
            color: #f9f3f3;
            /* background: url('../../images/home/icon_customer_service.png') 95% center no-repeat; */
            background-size: .65rem;
        }

        .systemMsg {

            position: absolute;
            left: 0;
            right: 0;
            bottom: 20%;
            font-size: 12px;
            height: 121px;
            width: 90%;
            background: url('../../images/home/msg_bg.png') center no-repeat;
            background-size: 100%;
            margin: auto;
            padding-left: 10px;

        }

        .systemMsg .msgTag {
            text-align: center;
            font-size: 16px;
            color: #FFB400;
            margin-top: 17px;
        }

        .systemMsg .list {
            margin-left: 5px;
            position: relative;
            width: 280px;
            height: 30%;
            display: block;
            margin: 0;
            padding: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #E5E2FF;
            padding-left: 10px;
        }

        .systemMsg .list:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 9px;
            height: 3px;
            width: 3px;
            border-radius: 100%;
            background: #E5E2FF;
        }

        .systemMsg .msgContent {
            height: 72px;

            margin: 4px 14px;
            font-size: .37rem;
            line-height: 23px;
        }

        .account {
            position: fixed;
            bottom: 50px;
            left: 0;
            right: 0;
            height: 35px;
            background: #101A5A;
            line-height: 35px;
            color: #AFAFE2;
            padding-left: 20px;
            font-size: 0.4rem;
        }

        .accountBalance {
            color: #FFCD29;
            font-size: 0.5rem;
            line-height: 35px;
        }

        .team-activity {
            height: 20%;
            background: url(../../images/home/bg_activity.png) center no-repeat;

            background-size: 88%;
        }

        .team-activity .content-list {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 50%;
            padding: 0;
            margin: 0;
            padding-left: 10px;
        }

        .team-activity .content-list:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 6px;
            height: 3px;
            width: 3px;
            border-radius: 100%;
            background: #FADEA5;
        }

        .team-activity .content {
            color: #FADEA5;
            margin: 0 auto;
            height: 35%;
            width: 70%;
            font-size: .4rem;
            padding-top: 15%;
            padding-left: 5px;
            line-height: 20px;
        }

        .team-title {
            height: 24px;
            background: url(../../images/home/bg_theme.png) center -.45rem no-repeat;
            background-size: 9.6rem;
            text-align: center;
            color: #FADEA5;
            line-height: 24px;


        }

        .team-title .title {
            width: 70%;
            margin: auto;
            overflow: hidden;
            height: 24px;
            font-size: 0.4rem;
        }

        .team .pk {
            float: left;
            margin-left: 6%;
            background: url(../../images/home/btm_team.png) center no-repeat;
        }

        .team .competition {
            float: right;
            margin-right: 6%;
            background: url(../../images/home/btm_competition.png) center no-repeat;
        }

        .team .pk,
        .team .competition {
            height: 136px;
            width: 40%;
            background-size: 100%;
            margin-top: 32px;
            border: 0;
        }

        .team a {
            display: block;
            font-size: 17px;
            color: #1D1104;
            font-weight: 700;
            margin-top: 37%;
        }

        .nav .home span {
            color: #FFB400;
        }
    </style>
</head>

<body>

    <div style="height:100%;">
        <div class="customService"></div>
        <div class="team-activity">
            <div class="content">
                <div class="content-list">势点亮深圳七座地标 2017年KPL秋季赛总...</div>
            </div>
        </div>
        <div class="team-title">
            <div class="title">王者荣耀KPL秋季联赛火热进行中</div>
        </div>
        <div class="team">
            <button class="pk">
                <a href="./zhangDPK.html">战队PK</a>
            </button>
            <button class="competition">
                <a href="./guess_home.html">赛事竞猜</a>
            </button>
            <div class="clear"></div>
        </div>
        <div class="systemMsg">
            <div class="msgTag">系统消息</div>
            <div class="msgContent">

            </div>
            <div style="clear:both;"></div>
        </div>
        <div class="account">
            账户余额：
            <span class="accountBalance">8888888</span>
        </div>
        <div class="nav">
            <a class="home" href="./home.html">
                <img src="../../images/nav/icon_home_active.png" alt="">
                <br>
                <span>首页</span>
            </a>
            <!-- <a><a href="">赛事</a></a> -->
            <a class="rank" href="../rank/rank_home.html">
                <img src="../../images/nav/icon_ranking list.png" alt="">
                <br>
                <span>排行榜</span>
            </a>
            <a class="pay" href="../eSports/eSports.html">
                <img src="../../images/nav/icon_Pay.png" alt="">
                <br>
                <span href="">电子竞技</span>
            </a>
            <a class="personal" href="../personal/personal.html">
                <img src="../../images/nav/icon_user.png" alt="">
                <br>
                <span>个人中心</span>
            </a>
        </div>
    </div>
</body>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/public.js"></script>
<script type="text/javascript">
    function ajaxSystemNotice(){
        $.post(sysInfoUrl, {}, (res) => {
            let obj = res.obj;
            obj.forEach((item, index) => {
                let homeStm = ` <div class="list">恭喜 ${item.fdUserName} 在 ${item.fdRoomName}房间盈利${item.fdBettingAmount}元宝</div>`
                
                $('.msgContent').append(homeStm);
                var list_num = $('.msgContent .list').length;
                console.log(list_num);
                if(list_num == 4){
                    $(".msgContent div:first-child").remove();
                }
                
            });
        });
    }
    $(function () {
        $.post(userInfoUrl, (res) => {
            let obj = res.obj;
            $('.accountBalance').html(obj.fdOver)
        });
        $.post(sysInfoUrl, {}, (res) => {
            let obj = res.obj;
            obj.forEach((item, index) => {
                let homeStm = ` <div class="list">恭喜 ${item.fdUserName} 在 ${item.fdRoomName}房间盈利${item.fdBettingAmount}元宝</div>`
                
                $('.msgContent').append(homeStm);
                var list_num = $('.msgContent .list').length;
                console.log(list_num);
                if(list_num == 4){
                    $(".msgContent div:first-child").remove();
                }
                
            });
        });
        setInterval("ajaxSystemNotice()",60000);
        
        $.post(systemNotice, {
            type: 1
        }, (res) => {
            res.obj.forEach((item, index) => {
                if (index == 0) {
                    $('.content-list').text((item.fdContent))
                } 
            });
        });

        $('.content-list').click(function(){
            window.location.href='./activity.html?type=0'
        })
        // $('.msgContent').click(function(){
        //     window.location.href='./activity.html?type=1'
        // })

    })
</script>

</html>